<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ETF网格交易2.0系统 - 高级压力测试</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1600px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .strategy-tabs {
            display: flex;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }

        .tab-button {
            flex: 1;
            padding: 15px 20px;
            background: none;
            border: none;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            color: #6c757d;
        }

        .tab-button.active {
            background: white;
            color: #2c3e50;
            border-bottom: 3px solid #667eea;
        }

        .tab-button:hover {
            background: #e9ecef;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
            padding: 30px;
        }

        .control-panel {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
            width: 100%;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        }

        .results-panel {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }

        .strategy-section {
            display: none;
        }

        .strategy-section.active {
            display: block;
        }

        .strategy-description {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #2196f3;
        }

        .strategy-description h3 {
            color: #1976d2;
            margin-bottom: 10px;
        }

        .grid-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .grid-table th, .grid-table td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #e9ecef;
        }

        .grid-table th {
            background: #2c3e50;
            color: white;
            font-weight: 600;
        }

        .grid-table tr:hover {
            background: #f8f9fa;
        }

        .chart-container {
            margin-top: 30px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .stat-card h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .stat-card .value {
            font-size: 2em;
            font-weight: bold;
            color: #667eea;
        }

        .profit { color: #27ae60; }
        .loss { color: #e74c3c; }

        .multi-grid-controls {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .grid-config {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .grid-config h4 {
            color: #2c3e50;
            margin-bottom: 10px;
            text-align: center;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
            .multi-grid-controls {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>ETF网格交易2.0系统</h1>
            <p>高级策略压力测试平台 - 留利润 | 逐格加码 | 一网打尽</p>
        </div>

        <div class="strategy-tabs">
            <button class="tab-button active" onclick="switchStrategy('profit-retention')">2.1 留利润</button>
            <button class="tab-button" onclick="switchStrategy('progressive-betting')">2.2 逐格加码</button>
            <button class="tab-button" onclick="switchStrategy('multi-grid')">2.3 一网打尽</button>
        </div>

        <div class="main-content">
            <div class="control-panel">
                <!-- 2.1 留利润策略 -->
                <div id="profit-retention" class="strategy-section active">
                    <div class="strategy-description">
                        <h3>2.1 留利润策略</h3>
                        <p>每次网格卖出时保留部分利润，让利润无限期持有，在强势上涨中获取更大收益。</p>
                    </div>

                    <div class="form-group">
                        <label for="etfName1">ETF品种</label>
                        <select id="etfName1">
                            <option value="中证500">中证500</option>
                            <option value="沪深300">沪深300</option>
                            <option value="创业板指">创业板指</option>
                            <option value="券商指数">券商指数</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="initialPrice1">初始价格</label>
                        <input type="number" id="initialPrice1" value="1.0" step="0.01" min="0.01">
                    </div>

                    <div class="form-group">
                        <label for="gridMode1">网格模式</label>
                        <select id="gridMode1" onchange="toggleGridInput1()">
                            <option value="percentage">百分比模式</option>
                            <option value="fixed">固定步长模式</option>
                        </select>
                    </div>

                    <div class="form-group" id="percentageGroup1">
                        <label for="gridSize1">网格大小 (%)</label>
                        <input type="number" id="gridSize1" value="5" step="0.5" min="1" max="20">
                    </div>

                    <div class="form-group" id="fixedGroup1" style="display: none;">
                        <label for="gridStep1">网格步长 (元)</label>
                        <input type="number" id="gridStep1" value="0.05" step="0.01" min="0.01" max="1">
                    </div>

                    <div class="form-group">
                        <label for="totalAmount1">总投入资金</label>
                        <input type="number" id="totalAmount1" value="100000" step="1000" min="1000">
                    </div>

                    <div class="form-group">
                        <label for="profitRetentionRate">利润保留比例 (%)</label>
                        <input type="number" id="profitRetentionRate" value="50" step="5" min="0" max="100">
                    </div>

                    <div class="form-group">
                        <label for="maxDecline1">最大下跌幅度 (%)</label>
                        <input type="number" id="maxDecline1" value="40" step="5" min="10" max="80">
                    </div>

                    <div class="form-group">
                        <label for="gridCount1">网格层数</label>
                        <input type="number" id="gridCount1" value="8" step="1" min="3" max="20">
                    </div>

                    <button class="btn" onclick="runProfitRetentionTest()">开始留利润测试</button>
                </div>

                <!-- 2.2 逐格加码策略 -->
                <div id="progressive-betting" class="strategy-section">
                    <div class="strategy-description">
                        <h3>2.2 逐格加码策略</h3>
                        <p>价格越低价值越大，每格增加一定投入，在底部获取更大利润。</p>
                    </div>

                    <div class="form-group">
                        <label for="etfName2">ETF品种</label>
                        <select id="etfName2">
                            <option value="中证500">中证500</option>
                            <option value="沪深300">沪深300</option>
                            <option value="创业板指">创业板指</option>
                            <option value="券商指数">券商指数</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="initialPrice2">初始价格</label>
                        <input type="number" id="initialPrice2" value="1.0" step="0.01" min="0.01">
                    </div>

                    <div class="form-group">
                        <label for="gridMode2">网格模式</label>
                        <select id="gridMode2" onchange="toggleGridInput2()">
                            <option value="percentage">百分比模式</option>
                            <option value="fixed">固定步长模式</option>
                        </select>
                    </div>

                    <div class="form-group" id="percentageGroup2">
                        <label for="gridSize2">网格大小 (%)</label>
                        <input type="number" id="gridSize2" value="5" step="0.5" min="1" max="20">
                    </div>

                    <div class="form-group" id="fixedGroup2" style="display: none;">
                        <label for="gridStep2">网格步长 (元)</label>
                        <input type="number" id="gridStep2" value="0.05" step="0.01" min="0.01" max="1">
                    </div>

                    <div class="form-group">
                        <label for="baseAmount2">基础投入金额</label>
                        <input type="number" id="baseAmount2" value="10000" step="1000" min="1000">
                    </div>

                    <div class="form-group">
                        <label for="increaseRate">每格增加比例 (%)</label>
                        <input type="number" id="increaseRate" value="5" step="1" min="0" max="20">
                    </div>

                    <div class="form-group">
                        <label for="startFromGrid">从第几格开始加码</label>
                        <input type="number" id="startFromGrid" value="2" step="1" min="1" max="10">
                    </div>

                    <div class="form-group">
                        <label for="maxDecline2">最大下跌幅度 (%)</label>
                        <input type="number" id="maxDecline2" value="40" step="5" min="10" max="80">
                    </div>

                    <div class="form-group">
                        <label for="gridCount2">网格层数</label>
                        <input type="number" id="gridCount2" value="8" step="1" min="3" max="20">
                    </div>

                    <button class="btn" onclick="runProgressiveBettingTest()">开始逐格加码测试</button>
                </div>

                <!-- 2.3 一网打尽策略 -->
                <div id="multi-grid" class="strategy-section">
                    <div class="strategy-description">
                        <h3>2.3 一网打尽策略</h3>
                        <p>同时运行多个不同幅度的网格系统，小网满足日常，中网改善生活，大网赚大钱。</p>
                    </div>

                    <div class="form-group">
                        <label for="etfName3">ETF品种</label>
                        <select id="etfName3">
                            <option value="中证500">中证500</option>
                            <option value="沪深300">沪深300</option>
                            <option value="创业板指">创业板指</option>
                            <option value="券商指数">券商指数</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="initialPrice3">初始价格</label>
                        <input type="number" id="initialPrice3" value="1.0" step="0.01" min="0.01">
                    </div>

                    <div class="form-group">
                        <label for="totalAmount3">总投入资金</label>
                        <input type="number" id="totalAmount3" value="300000" step="10000" min="30000">
                    </div>

                    <div class="form-group">
                        <label for="gridMode3">网格模式</label>
                        <select id="gridMode3" onchange="toggleGridInput3()">
                            <option value="percentage">百分比模式</option>
                            <option value="fixed">固定步长模式</option>
                        </select>
                    </div>

                    <div class="multi-grid-controls">
                        <div class="grid-config">
                            <h4>小网</h4>
                            <div class="form-group" id="smallGridPercentage">
                                <label for="smallGridSize">网格大小 (%)</label>
                                <input type="number" id="smallGridSize" value="5" step="0.5" min="1" max="20">
                            </div>
                            <div class="form-group" id="smallGridFixed" style="display: none;">
                                <label for="smallGridStep">网格步长 (元)</label>
                                <input type="number" id="smallGridStep" value="0.05" step="0.01" min="0.01" max="1">
                            </div>
                            <div class="form-group">
                                <label for="smallGridRatio">资金比例 (%)</label>
                                <input type="number" id="smallGridRatio" value="50" step="5" min="10" max="80">
                            </div>
                            <div class="form-group">
                                <label for="smallGridLayers">网格层数</label>
                                <input type="number" id="smallGridLayers" value="8" step="1" min="3" max="15">
                            </div>
                        </div>

                        <div class="grid-config">
                            <h4>中网</h4>
                            <div class="form-group" id="mediumGridPercentage">
                                <label for="mediumGridSize">网格大小 (%)</label>
                                <input type="number" id="mediumGridSize" value="15" step="1" min="5" max="50">
                            </div>
                            <div class="form-group" id="mediumGridFixed" style="display: none;">
                                <label for="mediumGridStep">网格步长 (元)</label>
                                <input type="number" id="mediumGridStep" value="0.15" step="0.01" min="0.01" max="1">
                            </div>
                            <div class="form-group">
                                <label for="mediumGridRatio">资金比例 (%)</label>
                                <input type="number" id="mediumGridRatio" value="30" step="5" min="10" max="50">
                            </div>
                            <div class="form-group">
                                <label for="mediumGridLayers">网格层数</label>
                                <input type="number" id="mediumGridLayers" value="5" step="1" min="2" max="10">
                            </div>
                        </div>

                        <div class="grid-config">
                            <h4>大网</h4>
                            <div class="form-group" id="largeGridPercentage">
                                <label for="largeGridSize">网格大小 (%)</label>
                                <input type="number" id="largeGridSize" value="30" step="2" min="10" max="80">
                            </div>
                            <div class="form-group" id="largeGridFixed" style="display: none;">
                                <label for="largeGridStep">网格步长 (元)</label>
                                <input type="number" id="largeGridStep" value="0.30" step="0.01" min="0.01" max="1">
                            </div>
                            <div class="form-group">
                                <label for="largeGridRatio">资金比例 (%)</label>
                                <input type="number" id="largeGridRatio" value="20" step="5" min="5" max="30">
                            </div>
                            <div class="form-group">
                                <label for="largeGridLayers">网格层数</label>
                                <input type="number" id="largeGridLayers" value="3" step="1" min="2" max="8">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="maxDecline3">最大下跌幅度 (%)</label>
                        <input type="number" id="maxDecline3" value="60" step="5" min="20" max="80">
                    </div>

                    <button class="btn" onclick="runMultiGridTest()">开始一网打尽测试</button>
                </div>
            </div>

            <div class="results-panel">
                <h2>测试结果</h2>
                
                <div class="stats-grid" id="statsGrid">
                    <!-- 统计卡片将在这里动态生成 -->
                </div>

                <div class="chart-container">
                    <canvas id="priceChart" width="400" height="200"></canvas>
                </div>

                <div class="chart-container">
                    <canvas id="profitChart" width="400" height="200"></canvas>
                </div>

                <table class="grid-table" id="gridTable">
                    <thead>
                        <tr>
                            <th>网格层</th>
                            <th>买入价格</th>
                            <th>卖出价格</th>
                            <th>投入金额</th>
                            <th>预期收益</th>
                            <th>收益率</th>
                        </tr>
                    </thead>
                    <tbody id="gridTableBody">
                        <!-- 网格数据将在这里动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="grid-trading-2.0.js"></script>
    <script>
        // 切换策略标签
        function switchStrategy(strategy) {
            // 隐藏所有策略区域
            document.querySelectorAll('.strategy-section').forEach(section => {
                section.classList.remove('active');
            });
            
            // 移除所有标签的active状态
            document.querySelectorAll('.tab-button').forEach(button => {
                button.classList.remove('active');
            });
            
            // 显示选中的策略区域
            document.getElementById(strategy).classList.add('active');
            
            // 激活对应的标签
            event.target.classList.add('active');
        }

        // 切换2.1留利润策略的网格输入模式
        function toggleGridInput1() {
            const gridMode = document.getElementById('gridMode1').value;
            const percentageGroup = document.getElementById('percentageGroup1');
            const fixedGroup = document.getElementById('fixedGroup1');
            
            if (gridMode === 'percentage') {
                percentageGroup.style.display = 'block';
                fixedGroup.style.display = 'none';
            } else {
                percentageGroup.style.display = 'none';
                fixedGroup.style.display = 'block';
            }
        }

        // 切换2.2逐格加码策略的网格输入模式
        function toggleGridInput2() {
            const gridMode = document.getElementById('gridMode2').value;
            const percentageGroup = document.getElementById('percentageGroup2');
            const fixedGroup = document.getElementById('fixedGroup2');
            
            if (gridMode === 'percentage') {
                percentageGroup.style.display = 'block';
                fixedGroup.style.display = 'none';
            } else {
                percentageGroup.style.display = 'none';
                fixedGroup.style.display = 'block';
            }
        }

        // 切换2.3一网打尽策略的网格输入模式
        function toggleGridInput3() {
            const gridMode = document.getElementById('gridMode3').value;
            const smallPercentage = document.getElementById('smallGridPercentage');
            const smallFixed = document.getElementById('smallGridFixed');
            const mediumPercentage = document.getElementById('mediumGridPercentage');
            const mediumFixed = document.getElementById('mediumGridFixed');
            const largePercentage = document.getElementById('largeGridPercentage');
            const largeFixed = document.getElementById('largeGridFixed');
            
            if (gridMode === 'percentage') {
                smallPercentage.style.display = 'block';
                smallFixed.style.display = 'none';
                mediumPercentage.style.display = 'block';
                mediumFixed.style.display = 'none';
                largePercentage.style.display = 'block';
                largeFixed.style.display = 'none';
            } else {
                smallPercentage.style.display = 'none';
                smallFixed.style.display = 'block';
                mediumPercentage.style.display = 'none';
                mediumFixed.style.display = 'block';
                largePercentage.style.display = 'none';
                largeFixed.style.display = 'block';
            }
        }
    </script>
</body>
</html>